<script>
// 导入所有内容给其添加一个别名叫 XLSX
import * as XLSX from 'xlsx'
export default {
  data () {
    return {
      tableData: [],
      currentPage: 1
    }
  },
  computed: {
    computedTableData () {
      return this.tableData.slice((this.currentPage - 1) * 3, (this.currentPage - 1) * 3 + 3)
    }
  },
  methods: {
    importClick () {
      // 选择文件的点击事件
      this.$refs.inp.click()
    },
    importChange (event) {
      // console.log(event.target.files[0]);
      // 1. 获取到我们选中的文件
      const file = event.target.files[0]
      // 2. 创建文件加载器
      const reader = new FileReader()
      // 3. 将文件读取成数据流
      reader.readAsBinaryString(file)
      // 读取成功之后的回调函数
      reader.onload = () => {

        // 4. 将我们的数据流转换成 js 对象
        const box = XLSX.read(reader.result, { type: 'binary' })

        // 5. 将 工作表1 中的数据提取出来
        let res = box.Sheets['工作表1']

        // 6. 将 工作表1 中的内容转换成 json 数据(js对象)
        res = XLSX.utils.sheet_to_json(res)

        // console.log(res);
        this.tableData = res
      }


    }
  }
}
</script>
<template>
  <div>
    <!-- input 配合 type="file" 可以选择本地文件 -->
    <el-button type="success" @click="importClick"> 选择文件 </el-button>
    <input type="file" ref="inp" hidden @change="importChange">

    <template v-if="tableData.length > 0">
      <el-table :data="computedTableData">
        <el-table-column type="index" label="序号" />
        <el-table-column label="图片">
          <template #default="scope">
            <div>
              <el-image style="width: 150px;" :src="scope.row.img1"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" />
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="originprice" label="价格" />
      </el-table>

      <el-pagination background layout="prev, pager, next" :page-size="3" v-model:current-page="currentPage"
        :total="tableData.length" />
    </template>


  </div>
</template>
